<template>
	<view class="content">
		<view class="detail-content">
			<view class="detail-title">
				<view class="good-mess">
					<view class="good-image">
						<image style="width: 100%;height: 100%;" :src="list.main_img"></image>
					</view>
					<view class="good-info">
						<view class="info-top">
							<view class="good-tip" :class="list.status === 1 && list.pay_status !== 3? '':'done'">{{ orderType(list.status, list.pay_status) }}</view>
							<view class="good-name"> {{ list.goods_name }} </view>
						</view>
						<view class="good-date"> {{ list.take_time?dateMode(new Date(list.take_time.split(' ')[0]), 'week'):"" }}&nbsp;&nbsp;&nbsp;&nbsp;X{{ list.number }}
						</view>
					</view>
				</view>
				<view class="good-communicat">
					<view class="communicat-item">
						<view class="communicat-title">取餐柜：{{ list.equipment_name }}</view>
						<view class="communi-item">订单编号：{{ list.order_no }}</view>
						<view class="communi-item">下单时间：{{ list.create_time }}</view>
						<view class="communi-item">取餐时间：{{ list.take_time }}</view>
						<view class="communi-item">订单金额：{{ list.sum_price }}</view>
					</view>
				</view>
				<view class="good-QR">
					<image style="width: 320rpx;height: 320rpx;" :src="QRImg"></image>
					<view v-if="list.status !== 1 || list.pay_status !== 2" class="QR-marsk"></view>
				</view>
				<view class="code-mess">
					取餐码： {{ list.take_code }}
				</view>
			</view>
		</view>
		<view class="evaluation" v-if="list.status === 2 && list.comment === 0" @click="assess">
			评价
		</view>
		<view v-if="list.status === 1 && list.pay_status === 2" class="take-tip">
			逾期未取视为放弃，餐品将被回收
		</view>
	</view>
</template>

<script>
	// 引入二维码库
	import QR from '@/utils/wxqrcode.js'; // 二维码生成器
	export default {
		data() {
			return {
				id: undefined,
				list: {
					address: "",
					main_img: "",
					price: undefined
				},
				QRImg: ""
			};
		},
		created() {
			// let key = this.getUrlKey('key')
			// if (key) {
			// 	this.getMess(key);
			// } else {
			// 	const _this = this;
			// 	let token = "";
			// 	uni.getStorage({
			// 		key: 'uerInfo',
			// 		success: function(res) {
			// 			_this.keepLogins(res.data.token)
			// 		}
			// 	});
			// }

			this.id = this.getUrlKey('id')
			this.getList();
		},
		methods: {
			goBack(e) {
				console.log('e', e)
				const _this = this
				this.$router.replace({
					path: '/pages/index/index' + '?' + _this.version
				});
			},
			keepLogins(token) {
				const path = {
					app: "wx",
					api: "api_wx_user_keepLogin",
					version: "1.0",
					type: "1",
					data: {
						token: token
					}
				}
				this.sendSock(path)
			},
			keepLogin() {
				uni.getStorage({
					key: 'uerInfo',
					success: function(res) {
						const path = {
							app: "wx",
							api: "api_wx_user_keepLogin",
							version: "1.0",
							type: "1",
							data: {
								token: res.data.token
							}
						}
						uni.sendSocketMessage({
							data: JSON.stringify(path)
						})
					}
				});
			},
			getMess(key) {
				const path = {
					app: "wx",
					api: "api_wx_user_login",
					version: "1.0",
					type: "1",
					data: {
						key: key
					}
				}
				this.sendSock(path)
			},
			getList() {
				const path = {
					app: "wx",
					api: "api_wx_order_getList",
					version: "1.0",
					type: 2, //1=未取，2=全部
					data: {
						id: this.id || ""
					}
				}
				this.sendSock(path)
			},
			showCode() {
				this.QRImg = QR.createQrCodeImg('S' + this.list.take_code + 'E', {
					size: parseInt(320) //二维码大小
				});
			},
			changeTitle(index) {
				this.current = index;
				this.type = index + 1;
				this.getList();
			},
			changTime() {
				this.$refs.timePopup.open();
			},
			// 选择日期
			bindDateChange: function(e) {
				this.start_date = e.target.value

			},
			bindDateChange2: function(e) {
				this.end_date = e.target.value;
				this.other = this.end_date;
			},
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			timeSelect(statu) {
				this.$refs.timePopup.close();
			},
			showTip(status) {
				return status === 1 ? this.icons.pendImg : this.icons.doneImg
			},
			evaluate(data) {
				var navData = JSON.stringify(data); // 这里转换成 字符串
				const _this = this;
				uni.navigateTo({
					url: '/pages/feedback/index?index=' + navData + '&' + _this.version
				})
			},
			createOrder(id) {
				const path = {
					app: "wx",
					api: "api_wx_order_againCreateOrder",
					version: "1.0",
					type: 2,
					data: {
						id: id
					}
				}
				this.sendSock(path)
			},
			// 评价
			assess() {
				const _this = this;
				uni.navigateTo({
					url: '/pages/feedback/index?id=' + _this.list.id + '&comment=' + _this.list.comment + '&' + _this.version
				})
			},
			sendSock(path) {
				if (this.$store.state.socketOpen) {
					uni.sendSocketMessage({
						data: JSON.stringify(path)
					});
				} else {
					this.$store.state.socketMsgQueue.push(JSON.stringify(path));
				}
				const _this = this
				uni.onSocketMessage(function(res) {
					_this.getSock(res.data)
				});
			},
			getSock(res) {
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else if (resj.code === 403) {
						const key = this.getUrlKey('key')
						this.getMess(key);
					} else if (resj.code === 404) {
						if (this.token) {
							this.keepLogin();
							this.getList();
						} else {
							console.log('token不存在')
						}
					} else {
						if (resj.api === "api_wx_user_login") {
							this.$store.commit('login', resj.data);
							this.temporary()
						} else if (resj.api === "api_wx_user_keepLogin") {
							this.temporary()
						} else if (resj.api === "api_wx_order_getList") {
							this.list = resj.data[0];
							console.log('this.list.showCode', this.list.showCode)
							if (this.list.take_code) {
								this.showCode()
							}
							console.log('this.list', this.list)
						} else if (resj.api === "api_wx_order_takeGoods") {
							uni.showToast({
								icon: "none",
								title: '取餐成功',
								duration: 2000
							});
							const _this = this
							setTimeout(function() {
								_this.$refs.popup.close();
								_this.current = 1;
								_this.type = 2;
								_this.getList()
							}, 500)
						} else if (resj.api === "api_wx_order_orderStatus") {
							this.getList();
						} else if (resj.api === "api_pay_index_payResult") {
							this.getList();
						} else if (resj.api === "api_wx_order_againCreateOrder") {
							console.log('resj.', resj.data)
							const data = {
								token: resj.data.token,
								price: resj.data.money
							}
							this.pay(data)
						}
					}
				}
			}
		}
	};
</script>

<style>
	.detail-content {
		width: 750rpx;
		height: 1080rpx;
		padding: 30rpx 30rpx 0rpx 30rpx;
		box-sizing: border-box;
		background: url('~@/static/images/detail_BG@3x.png') no-repeat;
		background-size: 100% 100%;
	}

	.detail-title {
		padding: 0 30rpx;
	}

	.good-mess {
		height: 200rpx;
		border-bottom: 1px dotted rgba(224, 224, 224, 1);
		display: flex;
		align-items: center;
	}

	.good-image {
		width: 120rpx;
		height: 120rpx;
	}

	.good-info {
		margin-left: 20rpx;
	}

	.good-tip {
		width: 90rpx;
		height: 30rpx;
		background: url('~@/static/images/tips2@3x.png') no-repeat;
		background-size: 100% 100%;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.good-tip.done {
		background: url("~@/static/images/carry2@3x.png") no-repeat;
		background-size: 100% 100%;
	}

	.info-top {
		display: flex;
		align-items: center;
	}

	.good-name {
		margin-left: 10rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
		line-height: 1;
	}

	.good-date {
		margin-top: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 1;
	}

	.good-communicat {
		padding: 40rpx 0rpx;
		border-bottom: 1px dotted rgba(224, 224, 224, 1);
	}

	.communicat-item {}

	.communicat-title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
		line-height: 1;
	}

	.communi-item {
		margin-top: 18rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 1;
	}

	.good-QR {
		margin: 40rpx auto;
		text-align: center;
		position: relative;
	}

	.code-mess {
		width: 610rpx;
		height: 98rpx;
		background: rgba(255, 255, 255, 1);
		border: 4rpx solid rgba(224, 224, 224, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}

	.evaluation {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(0deg, rgba(255, 195, 36, 1), rgba(255, 211, 94, 1));
		box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(255, 195, 36, 0.2);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
	}

	.QR-marsk {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		opacity: 0.7;
	}

	.take-tip {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(204, 204, 204, 1);
		line-height: 1;
	}
</style>
